<template>
  <div>
    <div class="hotelItem" v-for="hotel in hotelList" :key="hotel.id">
      <el-row>
        <el-col :span="8">
          <nuxt-link :to="`/hotel/detailed?id=${hotel.id}`"
            ><img :src="hotel.photos" alt="" class="pic"
          /></nuxt-link>
        </el-col>
        <el-col :span="10">
          <nuxt-link :to="`/hotel/detailed?id=${hotel.id}`" class="name">{{
            hotel.name
          }}</nuxt-link>
          <div class="enName">
            <span>{{ hotel.alias }}</span
            ><span style="margin-left: 20px">{{ hotel.hoteltype.name }}</span>
          </div>
          <div class="info">
            <div class="star">
              <el-rate
                v-model="hotel.stars"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
            </div>
            <div class="comment">
              <span>{{ Math.floor(Math.random() * 101) }}</span
              >条评价
            </div>
            <div class="post">
              <span>{{ Math.floor(Math.random() * 101) }}</span
              >篇游记
            </div>
          </div>
          <div class="location">
            <i class="el-icon-location"></i>位于:{{ hotel.address }}
          </div>
        </el-col>
        <el-col :span="6" class="xiecheng">
          <a
            href="https://www.baidu.com/"
            target="_blank"
            class="product"
            v-for="(product, index) in hotel.products"
            :key="index"
          >
            <div>{{ product.name }}</div>
            <div>
              <span class="money">￥{{ product.price }}</span
              ><span>起</span><i class="el-icon-arrow-right"></i>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ["hotelList"],
};
</script>


<style lang="less" scoped>
.hotelItem {
  padding: 20px 0;
  height: 210px;
  .pic {
    width: 320px;
    height: 210px;
    object-fit: cover;
  }

  .name {
    cursor: pointer;
    font-size: x-large;
    font-weight: 400;
    color: #000;
  }

  .enName {
    font-size: 16px;
    color: #999;
  }

  .info {
    display: flex;
    font-size: 16px;
    padding: 10px 0;
    div {
      padding-right: 30px;
    }
    .star {
      color: yellowgreen;
    }
    .comment {
      span {
        color: yellowgreen;
      }
    }
    .post {
      span {
        color: yellowgreen;
      }
    }
  }

  .xiecheng {
    margin-top: 32px;
    padding-left: 30px;
    cursor: pointer;
    .product {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .money {
      font-size: 18px;
      color: yellowgreen;
    }
  }
}
</style>